<template>
  <div>
    <!-- 表情选择器 -->
    <el-popover
      content="表情选择器"
      placement="bottom-start"
      popper-class="emoji-selector-popover"
      width="500"
    >
      <template #reference>
        <span class="cursor-pointer">😀</span>
      </template>
      <template #default>
        <div style="width: 500px; border-radius: 10px">
          <el-card shadow="never" style="max-width: 500px">
            <div class="emoji-container">
              <div
                v-for="(item, index) in currentEmojis"
                :key="index"
                :title="item.name"
                class="emoji-cell"
                @click="handleEmojiClick(item)"
              >
                {{ item.name }}
              </div>
            </div>
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :total="allEmojis.length"
              layout="prev, pager, next, jumper,total,"
              size="small"
            />
          </el-card>
        </div>
      </template>
    </el-popover>
  </div>
</template>

<script setup lang="ts">
import { computed, defineEmits, ref } from 'vue';

import emojilib from 'emojilib';

const emit = defineEmits<{
  selectEmoji: [data?: any];
}>();

// 分页相关 - 5行8列 = 40个表情每页
const pageSize = 40;
const currentPage = ref(1);

// 数据准备
const allEmojis = Object.entries(emojilib)
  .map(([name, data]) => {
    const [char, keywords] = Array.isArray(data) ? data : [data, []];
    return {
      name,
      char,
      keywords: Array.isArray(keywords) ? keywords : [],
    };
  })
  .filter((item) => item.name !== '🪣');

// 当前页的emoji - 5行8列
const currentEmojis = computed(() => {
  const start = (currentPage.value - 1) * pageSize;
  const end = start + pageSize;
  return allEmojis.slice(start, end);
});

// 点击每一项表情事件
const handleEmojiClick = (item: any) => {
  emit('selectEmoji', item);
};
</script>
<style scoped lang="scss">
//表情容器样式
.emoji-container {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: repeat(8, 1fr);
  gap: 5px;
  height: 300px;
  padding: 10px;
}

//表情项样式
.emoji-cell {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
  transition: all 0.3s ease;
  //表情项hover样式
  &:hover {
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 20%);
    scale: 1.2;
  }
}

//取消卡片边框
:deep(.el-card) {
  border: none !important;
}
//分页器样式
.emoji-pagination {
  width: 100%;
}
</style>

<!-- 全局样式 - 只针对特定的 popover 类名 -->
<style lang="scss">
// 只针对我们自己的表情选择器 popover，不会污染其他 popover
.emoji-selector-popover {
  padding: 0 !important;
  margin: 0 !important;

  .el-popper__inner {
    padding: 0 !important;
  }
}
</style>
